<template>
	<div>
		<ul>
			<li v-for="m in MessageList" :key='m.id'>
				<!-- <router-link 
				:to="`/home/message/detail?id=${m.id}&title=${m.title}`"
				>{{m.title}}
				</router-link>&nbsp;&nbsp; -->
				<router-link 
				:to="{
					path:'/home/message/detail',
					query:{
						id:m.id,
						title:m.title
					}
				}">{{m.title}}
				</router-link>&nbsp;&nbsp;
				<button @click="showPush(m)">push查看</button>
				<button @click="showReplace(m)">replace查看</button>
				<!-- <router-link to="/home/message/detail">{{m.title}}</router-link>&nbsp;&nbsp; -->
			</li>
		</ul>
		<hr>
		<router-view></router-view>
	</div>
</template>

<script>
	export default {
		name:'Message',
		data() {
			return {
				MessageList:[
					{id:'001',title:'message001'},
					{id:'002',title:'message002'},
					{id:'003',title:'message003'}
				]
			}
		},
		methods: {
			showPush(m){
				this.$router.push({
					path:'/home/message/detail',
					query:{
						id:m.id,
						title:m.title}
				})
				
			},
			showReplace(m){
				this.$router.replace({
					path:'/home/message/detail',
					query:{
						id:m.id,
						title:m.title}
				})
			}
		},
	}
</script>